<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style type="text/css">
      #rect {
        width: 120px;
        height: 100px;
        background-color: black;
        /*补全代码*/
        animation-name: rect;
        animation-duration: 10s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        /* animation: rect 10s linear infinite; */
      }
      @keyframes rect {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }
    </style>
  </head>
  <body>
    <!-- 补全代码 -->
    <div id="rect"></div>
    <input id="range" />

    <script type="text/javascript">
      // 补全代码
      var rectDom = document.getElementById('rect')
      var rangeDom = document.getElementById('range')
      var rangeVal = 1
      var rangeRes = 10
      rangeDom.value = rangeVal
      rangeDom.onchange = function() {
        rangeVal = this.value
        if (0 < rangeVal && rangeVal <= 10) {
          // 1-10, 2-9, 3-8, 4-7, 5-6, 6-5, 7-4, 8-3, 9-2, 10-1
          rangeRes = 11 - rangeVal
          rectDom.style.animationDuration = rangeRes + 's'
        }
      }
      /**
       请补全代码，要求当滑动 id 为 "range" 的滑块控件时可以改变 id 为 "rect" 的矩形旋转速度。要求如下：
        1. id为"rect"的矩形初始动画周期为 10 秒
        2. id为"range"的滑块控件默认值为1、最小值为、最大值为10、滑动间隔为 1
        3. 当滑动滑块值为1时，矩形动画周期为10秒、当...，为...、当滑动滑块值为10时，矩形动画周期为1秒
        注意：
        1. 必须使用DOM0级标准事件（onchange）
      */
    </script>
  </body>
</html>
